<template>
<view class="person_info-main page-view">
	<scroll-view class="container" :scroll-y="true">
		<view class="top-container">
			<view class="info">
				<image class="head-picture" src="@/static/images/a.jpg"></image>
				<view class="center">
					<view class="name-job">
						<text>王广</text>
						<text>执业兽医师</text>
					</view>
					<view class="intro">
						瑞鹏宠物医院15年<text>一线临床医师</text>
					</view>
				</view>
				<view class="follow-btn btn">
					<image src="@/static/images/icon/add.png"></image>
					<text>关注</text>
				</view>
			</view>
			
			<view class="intro-detail">
				<view class="line">
					<text>职业编号：</text>
					<text class="job-no">3432432<text> ></text></text>
				</view>
				<view class="line">
					<text>专业领域：</text>
					<text>擅长猫狗的内科、外科、心脑血管科，对猫狗的常见系统疾病能够快速鉴别，并给出治疗方案</text>
				</view>
				<view class="line">
					<text>个性签名：</text>
					<text>我爱狗狗热爱一切</text>
				</view>
			</view>
			
			<view class="tag-list">
				<view class="item" v-for="item in 3" @click.stop="$router.to('tag_article')">
					<text>#</text>狗狗腹泻
				</view>
			</view>
		</view>
		
		<view class="comment-tag-list">
			<view class="item" v-for="(item, index) in 10">
				{{ index % 2 == 1 ? "妙手回春sssss" : "棒极了" }}
			</view>
		</view>
		
		<view class="article-list">
			<view class="article-item" v-for="(item, index) in 3">
				<view class="title">关于狗狗拉稀，你需要知道的是这些</view>
				<view class="content">
					可能是由多种原因引起的，包括寄生虫感染、病毒性肠炎、食物中毒、消化不良等。以下是一些应对方法，但请注意，如果症状持续或就医…
					<text class="show-all-btn" @click="$router.to('article_detail')">全文</text>
				</view>
				<view class="content-images" v-if="index != 1">
					<image src="https://img1.baidu.com/it/u=2057804840,3058154633&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" v-for="item in 3" mode="aspectFill"></image>
				</view>
				<view class="content-video" v-else>
					<video src="https://vdept3.bdstatic.com/mda-qc4a8y0nwjqztth6/cae_h264/1709965024495473908/mda-qc4a8y0nwjqztth6.mp4?v_from_s=hkapp-haokan-hna&auth_key=1721129334-0-0-c8b11311133831f2b23c341601a644ae&bcevod_channel=searchbox_feed&pd=1&cr=0&cd=0&pt=3&logid=1734403921&vid=5959708547150549008&klogid=1734403921&abtest="></video>
				</view>
				<view class="date-time">发布于2024-09-08 12:02:4</view>
				<view class="tag-list">
					<view class="tag-item" @click.stop="$router.to('tag_article')">#狗狗拉稀</view>
				</view>
				<view class="bottom-btns">
					<view class="btn">
						<view>
							<image src="@/static/images/icon/star.png"></image>
							<text>17</text>
						</view>
					</view>
					<view class="btn">
						<view>
							<image src="@/static/images/icon/like.png" v-if="index == 0"></image>
							<image src="@/static/images/icon/like-acitve.png" v-else></image>
							<text>17</text>
						</view>
					</view>
					<view class="btn">
						<view>
							<image src="@/static/images/icon/share.png"></image>
							<text>17</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
	<view class="bottom-wrap">
		<view class="consult-btn btn" @click="$router.toPageCousult()">咨询</view>
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	}
}
</script>

<style lang="less">
.person_info-main {
	display: flex;
	flex-direction: column;
	
	.container {
		flex: 1;
		overflow-y: auto;
		
		.top-container {
			padding: 10rpx 32rpx 40rpx;
			
			.info {
				display: flex;
				align-items: center;
				gap: 20rpx;
				
				.head-picture {
					width: 120rpx;
					height: 120rpx;
					border-radius: 100%;
				}
				
				.center {
					flex: 1;
					
					.name-job {
						display: flex;
						align-items: center;
						
						>text {
							color: #3D3D3D;
							
							&:nth-child(1) {
								font-size: 32rpx;
								font-weight: bold;
							}
							
							&:nth-child(2) {
								font-size: 24rpx;
							}
						}
					}
					
					.intro {
						margin-top: 15rpx;
						font-size: 24rpx;
						color: #000000;
							
						>text {
							color: #FF6D03;
						}
					}
				}
				
				.follow-btn {
					width: 144rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background: #FF6D03;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 8rpx;
					
					>image {
						width: 26rpx;
						height: 26rpx;
					}
					
					>text {
						font-size: 26rpx;
						line-height: 1;
						color: #FFFFFF;
					}
				}
			}
			
			.intro-detail {
				margin-top: 36rpx;
				border-radius: 20rpx;
				padding: 20rpx;
				border: 1rpx solid #C4C4C4;
				
				.line {
					display: flex;
					gap: 8rpx;
					font-size: 24rpx;
					
					&:nth-child(n+2) {
						margin-top: 6rpx;
					}
					
					>text {
						line-height: 36rpx;
						
						&:nth-child(1) {
							color: #393938
						}
						
						&:nth-child(2) {
							flex: 1;
							color: #6A6A6A
						}
					}
					
					.job-no {
						display: flex;
						align-items: center;
						color: #FF6A00 !important;
						font-weight: bold;
					}
				}
			}
			
			.tag-list {
				display: flex;
				flex-wrap: wrap;
				gap: 15rpx;
				margin-top: 36rpx;
				
				.item {
					font-size: 24rpx;
					color: #000000;
					
					>text {
						color: #FF6A00;
					}
				}
			}
		}
		
		.comment-tag-list {
			display: flex;
			flex-wrap: wrap;
			padding: 42rpx 20rpx;
			gap: 24rpx;
			background: #F9F9F9;
			
			.item {
				display: flex;
				align-items: center;
				height: 48rpx;
				border-radius: 168rpx;
				padding: 0 24rpx;
				background: #E2F0FF;
				font-size: 24rpx;
				color: #0B1526;
			}
		}
		
		.article-list {
			padding: 0 32rpx;
			
			.article-item {
				margin-top: 40rpx;
				
				.title {
					font-size: 32rpx;
					line-height: 40rpx;
					color: rgba(0, 0, 0, 0.8);
				}
				
				.content {
					margin-top: 28rpx;
					font-size: 30rpx;
					font-weight: 500;
					line-height: 48rpx;
					color: #000000;
					
					.show-all-btn {
						color: #FF6D03;
					}
				}
				
				.content-images {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 30rpx;
					
					&::after {
						content: "";
						width: 212rpx;
					}
					
					>image {
						flex-shrink: 0;
						width: 212rpx;
						height: 212rpx;
						border-radius: 32rpx;
					}
				}
				
				.content-video {
					margin-top: 30rpx;
					
					>video {
						width: 100%;
					}
				}
				
				.date-time {
					color: #B4B4B4;
					font-size: 24rpx;
					margin-top: 30rpx;
					padding: 5rpx 0;
				}
				
				.tag-list {
					margin-top: 30rpx;
					display: flex;
					flex-wrap: wrap;
					
					.tag-item {
						display: flex;
						align-items: center;
						line-height: 1;
						flex-shrink: 0;
						margin-right: 20rpx;
						height: 48rpx;
						border-radius: 168rpx;
						padding: 0 24rpx;
						background: #E2F0FF;
						font-size: 24rpx;
						color: #0B1526;
					}
				}
				
				.bottom-btns {
					display: flex;
					margin-top: 30rpx;
					padding-top: 30rpx;
					border-top: 1rpx solid #F7F7F7;
					
					.btn {
						display: flex;
						align-items: center;
						padding-left: 80rpx;
						flex: 1;
						
						view {
							display: flex;
							align-items: center;
							
							>image {
								width: 30rpx;
								height: 30rpx;
							}
							
							>text {
								margin-left: 10rpx;
								font-size: 24rpx;
								line-height: 1;
								color: rgba(0, 0, 0, 0.5);
							}
						}
					}
				}
			}
		}
	}
	
	.bottom-wrap {
		padding: 30rpx;
		
		.consult-btn {
			height: 110rpx;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF6D03;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
}
</style>
